/**
 * 基础菜单 考试管理
 */
<template>

  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>考试管理-添加考试</el-breadcrumb-item>
    </el-breadcrumb>

    <!--添加页面-->
    <el-form label-width="70px" :model="examFrom" style="margin:30px" label-suffix="：">
      <el-form-item label="考试名称" prop="examName" label-width="100px">
        <el-input size="large" style="width:350px" v-model="examFrom.examName" clearable placeholder="请输入考试名称"></el-input>
      </el-form-item>
      <el-form-item label="分类名称" prop="typeId" label-width="100px">
        <el-select size="large" style="width:350px" v-model="examFrom.typeId" clearable placeholder="选择考试分类">
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.examType"
            :value="item.id">
        </el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="试卷名称" prop="paperId" label-width="100px">
        <el-select size="large" style="width:350px" v-model="examFrom.paperId" clearable placeholder="选择考试分类">
          <el-option
            v-for="item in paperList"
            :key="item.id"
            :label="item.paperName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="beginTime" label-width="100px">
        <el-date-picker size="large" style="width:350px" v-model="examFrom.beginTime" clearable placeholder="请输入开始时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime" label-width="100px">
        <el-date-picker size="large" style="width:350px" v-model="examFrom.endTime" clearable placeholder="请输入结束时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="答题时长" prop="allTime" label-width="100px">
        <el-input size="large" style="width:350px" v-model="examFrom.allTime" clearable placeholder="请输入答题时长时间"></el-input>
      </el-form-item>
      <el-form-item label="考试状态" prop="status" label-width="100px">
        <el-select size="large" style="width:350px" v-model="examFrom.status" clearable placeholder="选择考试状态">
          <el-option
            v-for="item in stat"
            :key="item.id"
            :label="item.status"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
     <div style="margin:20px 200px;">
      <el-button size="large" icon="el-icon-circle-close" @click="clear()">清空</el-button>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button size="large" icon="el-icon-circle-check" type="success" :loading="loading" @click="submitForm()">添加</el-button>
    </div>
  </div>
  
 
   
</template>

<script>
export default {
  data() {
    return {      
      //考试分类名称信息
      typeList: [],//考试分类信息(模糊查询分类条件)

      //考试试卷名称信息
      paperList: [],//考试试卷信息(模糊查询分类条件)
      
      //状态
      stat:[{
        id: 1,
        status:'未开始'
      },{
        id: 2,
        status:'正在进行'
      },{
        id: 3,
        status:'已完成'
      }],
      inforStatus:'',

      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载

      //添加的数据  编辑的数据
      examFrom:{
        id:"",
        examName:"",
        typeId:"",
        paperId:"",
        beginTime:"",
        endTime:"",
        allTime:"",
        creator:"",
        status:""
      },

      user:{}
    }
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  //刷新
  created() {
    //调用获取考试分类的方法
    this.getExamType();
    //调用获取考试书卷的方法
    this.getPaper();
    //获取当前登录人信息
    this.user = JSON.parse(localStorage.getItem('userdata'))
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {  
    //获取考试分类条件
    getExamType(){
      this.$axios.get('/api/infor/type')
      .then(res => {
        this.typeList = res.data;
        console.log('考试分类中数据是:', res);
      })
      .catch((e) => {
        console.log('考试分类获取数据失败');
      });
    },

    //获取考试试卷条件
    getPaper(){
      this.$axios.get('/api/infor/paper')
      .then(res => {
        this.paperList = res.data;
        console.log('考试试卷中数据是:', res);
      })
      .catch((e) => {
        console.log('考试试卷获取数据失败');
      });
    },

//======================= 添加，编辑  开  始 ===============================
    //日期格式化
    formatTime(date) { 
      let year = date.getFullYear()
      let month= date.getMonth()+ 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      let day=date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours=date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes=date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds=date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
    },

    // 增加页面保存方法
    submitForm() {
      if(this.examFrom.examName!='' && this.examFrom.typeId!='' && this.examFrom.paperId!='' && this.examFrom.beginTime!='' && this.examFrom.endTime!='' && this.examFrom.allTime!='' && this.examFrom.status!=''){
        let begintime = this.formatTime(this.examFrom.beginTime)
        this.examFrom.beginTime = begintime.substr(0,10)
        let endtime = this.formatTime(this.examFrom.endTime)
        this.examFrom.endTime = endtime.substr(0,10)
        this.examFrom.creator = this.user.id;
        this.$axios.post("/api/infor/add",this.examFrom)
        .then(res=>{
          this.$message({
          type: 'success',
          message: '考试添加成功！',
          })
          this.$router.push('./examlist');
        })
        .catch(err => {
          this.$message.error('添加失败，请稍后再试！')
        })
      }else{
        this.$message.error('信息不完整，请填写完整');
      }
    },

    //清空数据
    clear(){
      this.examFrom={
        id:"",
        examName:"",
        typeId:"",
        paperId:"",
        beginTime:"",
        endTime:"",
        allTime:"",
        creator:"",
        status:""
      }   
    },

  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>
